<template>
    <div>
        <div class="login-container">
            <div class="login-content">
                <div class="login-title"></div>
                <div class="login-box">
                    <p class="login-box-title">管理员登录</p>
                    <ul class="login-box-info">
                        <li>
                            <i class="el-icon-user"></i>
                            <input 
                                type="text" 
                                placeholder="用户名" 
                                v-model="userName"
                                @keyup="inputChange(1)"
                                @keyup.enter="loginFn">
                        </li>
                        <li>
                            <i class="el-icon-mobile"></i>
                            <input 
                                type="text" 
                                placeholder="手机号" 
                                v-model="phone"
                                maxlength="11"
                                @keyup="inputChange(2)"
                                @keyup.enter="loginFn">
                        </li>
                        <li>
                            <i class="el-icon-message"></i>
                            <input 
                                type="text" 
                                placeholder="短信验证码" 
                                v-model="authCode"
                                maxlength="4"
                                @keyup="inputChange(3)"
                                @keyup.enter="loginFn">
                            <el-button type="text" class="times color-primary get-code" v-if="sendMsgFlag">{{times}}</el-button>
                            <el-button type="text" class="get-code" @click="sendMsg" v-else>{{sendBtnText}}</el-button>
                        </li>
                    </ul>
                    <el-button type="primary" :loading="loginLoadFlag" round class="login-btn" @click="loginFn">登录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Storage from "@/utils/storage";
export default {
    data() {
        return {
            userName: '',
            phone: '',
            authCode: '',
            loginLoadFlag: false,
            sendMsgFlag: false, //发送验证码按钮状态
            sendBtnText: '获取验证码', //发送验证码文字
            times: '60s', //倒计时文字
        }
    },
    methods: {
        inputChange(val) {
            switch(val) {
                case 1:
                    //只能输入中英文
                    this.userName = this.userName.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, '')
                    break;
                case 2:
                    // 只能输入数字
                    this.phone = this.phone.replace(/[^\d]/g, '')
                    break;
                case 3:
                    // 只能输入数字
                    this.authCode = this.authCode.replace(/[^\d]/g, '')
                    break;
            }
        },
        sendMsg() {
            if(!this.userName) {
                this.$message.error('请输入用户名');
                return;
            }
            if(!this.phone) {
                this.$message.error('请输入手机号');
                return;
            }

            this.sendMsgAjax()
        },
        sendMsgAjax() {
            let params = {
                userName: this.userName,
                phone: this.phone
            }
            this.$http.post('/sys_user/login_sms', params)
                .then((res) => {
                    this.sendMsgFlag = true;
                    this.countdown();
                })
        },
        countdown() { //倒计时
            let time = 60;
            let t = setInterval(() => {
                time--;
                this.times = `${time}s`;
                if(time <= 0){
                    clearInterval(t)
                    this.sendBtnText = '重新获取';
                    this.sendMsgFlag = false;
                    this.times = '60s';
                }
            }, 1000)
        },
        loginFn() {
            if(!this.userName) {
                this.$message.error('请输入用户名');
                return;
            }
            if(!this.phone) {
                this.$message.error('请输入手机号');
                return;
            }
            if(!this.authCode) {
                this.$message.error('请输入短信验证码');
                return;
            }
            this.loginLoadFlag = true;

            let params = {
                userName: this.userName,
                phone: this.phone,
                smsCode: this.authCode
            }
            this.$http.post('/sys_user/login', params)
                .then((res) => {
                    if(res.code == 0) {
                        this.$message({
                            message: '登录成功',
                            type: 'success'
                        });
                        this.loginLoadFlag = false;
                        this.$store.commit("setToken", (Math.random().toString(36).substr(2)).repeat(3)); //设置随机token
                        this.$store.commit("setLoginState", true); //设置用户登录状态
                        Storage.set('roleAuthIdArr', JSON.stringify([]));
                        setTimeout(() => {
                            this.$router.push({
                                name: 'home'
                            })
                        }, 1000)
                    }else{
                        if(res.code == -1) {
                            this.$message.error(res.message);
                        }else{
                            this.$message.error(res.data.message);
                        }
                        this.loginLoadFlag = false;
                    }
                })
        },
    }
}
</script>

<style lang="scss" scoped>
    .login-container {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: url('https://ym-1251385011.cos.ap-guangzhou.myqcloud.com/images/20191023/15718168115022239.png') center no-repeat;
        background-size: cover;
        .login-content {
            width: 426px;
            border-radius: 16px;
            .login-title {
                width: 400px;
                height: 30px;
                margin: 0 auto 32px;
                background: url('https://ym-1251385011.cos.ap-guangzhou.myqcloud.com/images/20191021/15716296673099824.png') center no-repeat;
                background-size: cover;
            }
            .login-box {
                width: 100%;
                padding: 24px 26px;
                box-sizing: border-box;
                background-color: #fff;
                border-radius: 16px;
                overflow: hidden;
                box-shadow: -10px 10px 12px #3a81bf;
                .login-box-title {
                    margin-bottom: 24px;
                    font-size: 20px;
                }
                .login-box-info {
                    li {
                        width: 100%;
                        height: 45px;
                        padding: 0 12px;
                        box-sizing: border-box;
                        display: flex;
                        align-items: center;
                        margin-bottom: 16px;
                        background-color: #F2F2F2;
                        border-radius: 8px;
                        overflow: hidden;
                        i {
                            margin-right: 20px;
                            font-size: 24px;
                            color: #969C9E;
                        }
                        .get-code {
                            width: 90px;
                            margin-left: 20px;
                            font-size: 16px;
                            color: #4572CF;
                            text-align: right;
                        }
                        input {
                            height: 45px;
                            border: none;
                            padding: 0;
                            outline: none;
                            font-size: 16px;
                            background-color: #F2F2F2;
                        }
                    }
                }
                .login-btn {
                    width: 100%;
                    height: 50px;
                    margin-top: 16px;
                    color: #fff;
                    font-size: 18px;
                    background-color: #4572CF;
                    border-radius: 100em;
                    border: 1px solid #4572CF;
                }
            }
        }
    }
</style>
<style lang="scss">
    .login-box-info {
        li {
            .el-input {
                input {
                    height: 45px;
                    border: none;
                    padding: 0;
                    outline: none;
                    font-size: 16px;
                    background-color: #F2F2F2;
                }
            }
        }
    }
</style>